<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">

	<title>中航安贞（浙江）信息科技有限公司</title>


</head>
<style>
	.btnView {
		position: absolute;
		left: 50%;
		bottom: 5px;
	}

	.btnView div {
		width: 100px;
		height: 100px;
		background-color: rgba(94, 195, 241, 0.8);
		border-radius: 50%;
	}

	.btnView .hiden {
		display: none;
	}
</style>

<body style="overflow:hidden;margin:0px">
	<div id="720container"></div>
	<div class="btnView">
		<div id="pause" class="">
			<img style="width: 100%; height: 100%" src="./img/暂停.png" alt="" />
		</div>
		<div id="start" class="hiden">
			<img style="width: 100%; height: 100%" src="./img/播放.png" alt="" />
		</div>

		<!-- Core JavaScript Files -->

		<script src="js/three.min.js"></script>
		<script src="js/renderers/Projector.min.js"></script>
		<script src="js/renderers/CanvasRenderer.min.js"></script>

		<script>

			var camera, scene, renderer;

			var texture_placeholder,
				isUserInteracting = false,
				pauseOrStart = '',
				state = '',
				onMouseDownMouseX = 0, onMouseDownMouseY = 0,
				lon = 90, onMouseDownLon = 0,
				lat = 0, onMouseDownLat = 0,
				phi = 0, theta = 0,
				target = new THREE.Vector3();

			var pauseEle = document.querySelector('#pause')
			var startEle = document.querySelector('#start')
			init();
			animate();

			function init() {

				var container, mesh;

				container = document.getElementById('720container');

				camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1100);

				scene = new THREE.Scene();

				texture_placeholder = document.createElement('canvas');
				texture_placeholder.width = 128;
				texture_placeholder.height = 128;

				var context = texture_placeholder.getContext('2d');
				context.fillStyle = 'rgb( 200, 200, 200 )';
				context.fillRect(0, 0, texture_placeholder.width, texture_placeholder.height);
				var name = getUrlParam("name") == null ? 1 : getUrlParam("name");
				var materials = [
					loadTexture('textures/' + name + '/' + name + '_r.jpg'), // right
					loadTexture('textures/' + name + '/' + name + '_l.jpg'), // left
					loadTexture('textures/' + name + '/' + name + '_u.jpg'), // top
					loadTexture('textures/' + name + '/' + name + '_d.jpg'), // bottom
					loadTexture('textures/' + name + '/' + name + '_f.jpg'), // back
					loadTexture('textures/' + name + '/' + name + '_b.jpg') // front

				];
				mesh = new THREE.Mesh(new THREE.BoxGeometry(300, 300, 300, 20, 20, 20), new THREE.MeshFaceMaterial(materials));
				mesh.scale.x = - 1;
				scene.add(mesh);

				for (var i = 0, l = mesh.geometry.vertices.length; i < l; i++) {

					var vertex = mesh.geometry.vertices[i];

					vertex.normalize();
					vertex.multiplyScalar(550);

				}

				renderer = new THREE.CanvasRenderer();
				renderer.setPixelRatio(window.devicePixelRatio);
				renderer.setSize(window.innerWidth, window.innerHeight);
				container.appendChild(renderer.domElement);

				container.addEventListener('mousedown', onDocumentMouseDown, false);
				container.addEventListener('mousemove', onDocumentMouseMove, false);
				container.addEventListener('mouseup', onDocumentMouseUp, false);
				//document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
				container.addEventListener('mousewheel', onDocumentMouseWheel, false);
				container.addEventListener('DOMMouseScroll', onDocumentMouseWheel, false);

				container.addEventListener('touchstart', onDocumentTouchStart, false);
				container.addEventListener('touchmove', onDocumentTouchMove, false);


				window.addEventListener('resize', onWindowResize, false);

				// 暂停和开始事件
				pauseEle.addEventListener('click', function (event) {
					isUserInteracting = true;
					state = 'pause'
					pauseEle.className = 'hiden'
					startEle.className = ''
				}, false)
				startEle.addEventListener('click', function (event) {
					isUserInteracting = false;
					state = 'start'
					pauseEle.className = ''
					startEle.className = 'hiden'
				}, false)
			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize(window.innerWidth, window.innerHeight);

			}

			function loadTexture(path) {

				var texture = new THREE.Texture(texture_placeholder);
				var material = new THREE.MeshBasicMaterial({ map: texture, overdraw: 0.5 });

				var image = new Image();
				image.onload = function () {

					texture.image = this;
					texture.needsUpdate = true;

				};
				image.src = path;

				return material;

			}

			function onDocumentMouseDown(event) {
				event.preventDefault();
				isUserInteracting = true;
				pauseOrStart = 'pause'
				onPointerDownPointerX = event.clientX;
				onPointerDownPointerY = event.clientY;
				onPointerDownLon = lon;
				onPointerDownLat = lat;
			}
			function onDocumentMouseMove(event) {
				// if (isUserInteracting === true) {
				// 	lon = (onPointerDownPointerX - event.clientX) * 0.1 + onPointerDownLon;
				// 	lat = (event.clientY - onPointerDownPointerY) * 0.1 + onPointerDownLat;
				// }
				if(pauseOrStart === 'pause'){
					lon = (onPointerDownPointerX - event.clientX) * 0.1 + onPointerDownLon;
					lat = (event.clientY - onPointerDownPointerY) * 0.1 + onPointerDownLat;
				}
			}

			function onDocumentMouseUp(event) {
					isUserInteracting = false;
					if (state == 'pause') {
						isUserInteracting = true;
					}
					pauseOrStart = 'start'
					
					

					
			}

			function onDocumentMouseWheel(event) {

				// WebKit
				if (event.wheelDeltaY) {

					camera.fov -= event.wheelDeltaY * 0.05;
					if (camera.fov > 85)
						camera.fov = 85;
					if (camera.fov < 15)
						camera.fov = 15;

					// Opera / Explorer 9

				} else if (event.wheelDelta) {

					camera.fov -= event.wheelDelta * 0.05;
					if (camera.fov > 85)
						camera.fov = 85;
					if (camera.fov < 15)
						camera.fov = 15;

					// Firefox

				} else if (event.detail) {

					camera.fov -= event.detail * 0.05;
					if (camera.fov > 85)
						camera.fov = 85;
					if (camera.fov < 15)
						camera.fov = 15;
				}
				event.returnValue = false;
				camera.updateProjectionMatrix();

			}

			function onDocumentTouchStart(event) {

				if (event.touches.length == 1) {

					event.preventDefault();

					onPointerDownPointerX = event.touches[0].pageX;
					onPointerDownPointerY = event.touches[0].pageY;

					onPointerDownLon = lon;
					onPointerDownLat = lat;

				}

			}

			function onDocumentTouchMove(event) {

				if (event.touches.length == 1) {

					event.preventDefault();

					lon = (onPointerDownPointerX - event.touches[0].pageX) * 0.1 + onPointerDownLon;
					lat = (event.touches[0].pageY - onPointerDownPointerY) * 0.1 + onPointerDownLat;

				}

			}

			function animate() {

				requestAnimationFrame(animate);
				update();

			}

			function update() {

				if (isUserInteracting === false) {

					lon += 0.1;

				}

				lat = Math.max(- 85, Math.min(85, lat));
				phi = THREE.Math.degToRad(90 - lat);
				theta = THREE.Math.degToRad(lon);

				target.x = 500 * Math.sin(phi) * Math.cos(theta);
				target.y = 500 * Math.cos(phi);
				target.z = 500 * Math.sin(phi) * Math.sin(theta);

				camera.position.copy(target).negate();
				camera.lookAt(target);

				renderer.render(scene, camera);

			}
			function getUrlParam(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) return decodeURI(r[2]); return null;
			}
		</script>

</body>

</html>